<template>
    <div class="forgetpass">
        <div class="set">
            <ul class="userlist" v-if="isFshow=='true'">
                <li>
                    <span>
                        <img src="@/assets/imgs/register/sjhm.png" alt="">
                    </span>
                    <input id="phoneNo" placeholder="输入手机号码" v-model="forget.mobile" @blur="mobileBlur" onkeyup="this.value=this.value.replace(/[^0-9]+/,'');" @keyup="myKeyup($event)" />
                </li>
                <li>
                    <span>
                        <img src="@/assets/imgs/register/dxyzm.png" alt="">
                    </span>
                    <input placeholder="请输入验证码" v-model="forget.code" @blur="codeBlur" @keyup="myKeyup($event)" />
                    <button @click="getSMSCode" class="smsse" :disabled="!show">
                        <p class="set" v-show="show">获取验证码</p>
                        <p v-show="!show" class="count">{{count}} s</p>
                    </button>
                </li>

                <button class="confirmbtn" @click="getNext">下一步</button>
            </ul>
            <ul class="userlist" v-if="isFshow=='false'">
                <li>
                    <span>
                        <img src="@/assets/imgs/register/dlmm.png" alt="">
                    </span>
                    <!-- <input type="password" placeholder="请输入支付密码" v-model="postPass.payPassword" @keyup="myKeyup($event)" @blur="passwordBlur" /> -->
                    <input type="password" placeholder="请输入支付密码" v-model="postPass.payPassword" @keyup="myKeyup($event)" />
                </li>
                <li>
                    <span>
                        <img src="@/assets/imgs/register/dlmm.png" alt="">
                    </span>
                    <!-- <input type="password" placeholder="请确认支付密码" v-model="postPass.payPasswords" @keyup="myKeyup($event)" @blur="passwordsBlur" /> -->
                    <input type="password" placeholder="请确认支付密码" v-model="postPass.payPasswords" @keyup="myKeyup($event)"  />
                </li>
                <button class="confirmbtn" @click="getPassw">确认</button>
            </ul>
        </div>
    </div>
</template>

<script>
import { domain } from '@/assets/js/config'
import http from "@/assets/js/axios"
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    data() {
        return {
            isFshow: 'true',
            userToken: '',
            forget: {
                mobile: '',
                code: '',
            },
            postPass: {
                payPassword: '',
                payPasswords: '',
            },
            show: true,
            count: '',
            timer: null,
        }
    },
    components: {

    },
    mounted() {
         var userToken = localStorage.getItem('token')
        this.userToken = userToken
        var that = this
        if (!userToken) {
            that.$router.push('/login')
        }
        this.forget.mobile = localStorage.getItem('phones') || '';
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        myKeyup: async function (e) {
            var keycode = window.event ? e.keyCode : e.which;
            if (keycode == 13) {
                // this.forgetNow();
            }
        },
        // 修改密码下一步
        getNext: async function () {
            if (this.forget.mobile && this.forget.code) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.forget.mobile)) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '手机号码格式不正确！' })
                    console.log(444);
                } else if (!/^[0-9]{4,6}$/.test(this.forget.code)) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '验证码格式不正确！' })
                } else {
                    const res = await http.post('xshk/f/pay/validate/sendCode?token=' + this.userToken, this.forget)
                    console.log(res);
                    if (res.data.code == 0) {
                        maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                        this.isFshow = 'false'
                    } else {
                        maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                    }
                }
            } else {
                maskTips({ id: 'no-risk' + new Date().getTime(), txt: '请把必填数据填写完整，再提交！' })
                console.log(666);
            }

        },
        // 修改密码
        getPassw: async function () {
            if (this.postPass.payPassword && this.postPass.payPasswords) {
                // if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.postPass.payPassword)) {
                //     maskTips({ id: 'no-risk' + new Date().getTime(), txt: '设置密码格式不正确！' })
                //     console.log(444);
                // } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.postPass.payPasswords)) {
                //     maskTips({ id: 'no-risk' + new Date().getTime(), txt: '确认密码格式不正确！' })
                //     console.log(555);
                // } else 
                if (this.postPass.payPassword != this.postPass.payPasswords) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '两次密码不相同，请重新输入' })
                    console.log(666);
                } else {
                    const res = await http.post('xshk/f/submit/pay/password?token=' + this.userToken, this.postPass)
                    console.log(res);
                    if (res.data.code == 0) {
                        maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                        this.$router.go(-1)
                    } else {
                        maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                    }
                }
            } else {
                maskTips({ id: 'no-risk' + new Date().getTime(), txt: '请把必填数据填写完整，再提交！' })
                console.log(666);
            }

        },
        mobileBlur: async function () {
            const _this = this
            if (_this.forget.mobile) {
                _this.usernameTips = false;
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(_this.forget.mobile)) {
                    Toast({ message: '请输入正确的手机号！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        codeBlur: async function () {
            const _this = this
            if (_this.forget.code) {
                _this.usernameTips = false;
                if (!/^[0-9]{4,6}$/.test(_this.forget.code)) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '验证码格式不正确！' })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        passwordBlur: async function () {
            const _this = this
            if (_this.postPass.payPassword) {
                _this.passwordTips = false;
                if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(_this.postPass.payPassword)) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '新密码格式不正确！' })
                }
            } else {
                _this.passwordTips = true;
            }
        },
        passwordsBlur: async function () {
            const _this = this
            if (_this.postPass.payPasswords) {
                _this.passwordTips = false;
                if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(_this.postPass.payPasswords)) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '确认密码格式不正确！' })
                }
            } else {
                _this.passwordTips = true;
            }
        },
        getCode(forget) {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000)
            }
        },
        getSMSCode: async function () {
            if (this.forget.mobile) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.forget.mobile)) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: '请输入正确的手机号码！' })
                    return false;
                } else {
                    const res = await http.post('xshk/f/pay/password/sendCode', this.forget)
                    console.log(res);
                    if (res.data.code == 0) {
                        this.getCode()
                        maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                    } else {
                        maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                    }
                }
            } else {
                maskTips({ id: 'no-risk' + new Date().getTime(), txt: '请输入手机号后，再提交！' })
            }

        }
    }
}
</script>

<style lang='stylus' scoped>
.forgetpass {
    margin-top: 30px;

    .set {
        ul {
            width: 100%;
            // height: 400px;
            padding: 0 10% 0 10%;
            font-size: 16px;

            li {
                height: 60px;
                line-height: 60px;
                width: 100%;
                border-bottom: 1px solid lightgrey;
                margin-bottom: 5px;
                position: relative;

                span {
                    margin-top: 16px;
                    width: 20px;
                    height: 20px;
                    display: block;
                    float: left;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }

                input {
                    display: block;
                    height: 95%;
                    width: 50%;
                    float: left;
                    text-indent: 20px;
                    font-size: 16px;
                }

                .smsse {
                    position: absolute;
                    top: 7px;
                    right: 1px;
                    display: inline-block;
                    border: 1px solid #c2df5a;
                    border-radius: 5px;
                    background: #c2df5a;
                    padding: 0;

                    p {
                        width: 119px;
                        height: 36px;
                        line-height: 36px;
                        color: #fff;
                        font-size: 16px;
                        border: 1px solid #ccc;
                    }

                    p.count {
                        border: 1px solid #ccc;
                        background: #ccc;
                    }
                }
            }

            .confirmbtn {
                display: block;
                height: 50px;
                width: 100%;
                margin-top: 30px;
                border: 0;
                background: #c2df5a;
                color: #fff;
                font-size: 18px;
                border-radius: 5px;
            }
        }
    }
}
</style>
